﻿<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nva测试</title>
    <link href="css/main.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <!-- Nav -->
            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item"><a href="#">菜单一</a></li>
                    <li class="nav-item"><a href="#">菜单二</a></li>
                    <li class="nav-item"><a href="#">菜单三</a></li>
                    <li class="nav-item"><a href="#">菜单四</a></li>
                    <li class="nav-item"><a href="#">菜单五</a></li>
                    <li class="nav-item"><a href="#">菜单六</a></li>
                    <li class="nav-item"><a href="#">菜单六</a></li>
                    <li class="nav-item"><a href="#">菜单六</a></li>
                </ul>
            </nav>
            <!-- /Nav -->
        </div>
    </div>

    <script>
        (function () {

            // Create mobile element
            var mobile = document.createElement('div');
            mobile.className = 'nav-mobile';
            document.querySelector('.nav').appendChild(mobile);

            // hasClass
            function hasClass(elem, className) {
                return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
            }

            // toggleClass
            function toggleClass(elem, className) {
                var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(' ' + className + ' ') >= 0) {
                        newClass = newClass.replace(' ' + className + ' ', ' ');
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                } else {
                    elem.className += ' ' + className;
                }
            }

            // Mobile nav function
            var mobileNav = document.querySelector('.nav-mobile');
            var toggle = document.querySelector('.nav-list');
            mobileNav.onclick = function () {
                toggleClass(this, 'nav-mobile-open');
                toggleClass(toggle, 'nav-active');
            };
        })();
    </script>
</body>
</html>